Mix command

Package.json
File content options , can change before install to just use what you want
  • vue
  • post css
  • Bootstrap
  • Axios
  • Sass
  • Laravel-mix
  • Tailwind css
  • Datatable
  • Query
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"autoprefixer": "^10.3.7",
"bootstrap": "^5.1.3",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.39",
"lodash": "^4.17.19",
"node-sass": "^7.0.1",
"postcss": "^8.3.9",
"resolve-url-loader": "^4.0.0",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"tailwindcss": "^2.2.17",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"axios": "^0.21.4",
"datatables.net-dt": "^1.11.3",
"development": "^0.0.1",
"jquery": "^3.6.0",
"js-ray": "0.0.7",
"vue": "^2.6.14"
}
}
# run node modules
npm install
# install mix and sass with prefiles
npm install laravel-mix cross-env node-sass --save-dev
Webpack.mix.js
const mix = require('laravel-mix');
mix.js('web/public/js/app.js', 'web/Views/default/_assets/public/js')
.sass('web/public/sass/app.sass', 'web/Views/default/_assets/public/css')
.vue();
run compile
# run development
npm run dev
# production
npm run prod
# for mix production
npm run production
# test live
npm run hot
Js file in public folder
window._ = require('lodash');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Run bootstrap css in sass file
@import '~bootstrap/scss/bootstrap.scss'